<template>

  <el-container class="container">
    <el-header>Header</el-header>

    <el-container>
      <el-aside width="200px">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu default-active="index" unique-opened=true :popper-effect="light" background-color="#1C3334"
            text-color="#fff"
              active-text-color="#22a6b3" class="el-menu-vertical-demo" @open="handleOpen" router>
              <el-menu-item index="index">
                <template #title>
                  <el-icon>
                    <Sunny />
                  </el-icon>
                  <span>首页</span>
                </template>
              </el-menu-item>
              <el-sub-menu index="1">
                <template #title>
                  <el-icon>
                    <Soccer />
                  </el-icon>
                  <span>条件管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/layout/category">分类</el-menu-item>
                  <el-menu-item index="/layout/tag">标签</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon>
                    <Sugar />
                  </el-icon>
                  <span>资源管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/layout/resource">资源</el-menu-item>
                  <el-menu-item index="/layout/comment">评论</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                  <el-icon>
                    <User />
                  </el-icon>
                  <span>用户管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/layout/category">用户</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
        <!-- 左侧导航 -->


      </el-aside>
      <el-main>
        <router-view /><!-- 路由出口 -->
      </el-main>
    </el-container>

    <el-footer>Footer</el-footer>
  </el-container>
</template>

<script setup>
import {
  Location,
} from '@element-plus/icons-vue'

function handleOpen(key, keyPath) {
  // console.log(key, keyPath);
}
function handleClose(key, keyPath) {
  // console.log(key, keyPath);
}

</script>

<style scoped>

/* 去掉选项右侧边框 */
.el-menu {
  border-right: none;
}
.el-header,
.el-footer {
  background-color: var(--head-foot-color) ;
  color: #333;
  text-align: center;
  line-height: 60px;
  /* 添加以下属性以固定头部和底部 */
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1000;
}

.el-header {
  top: 0;
}

.el-footer {
  bottom: 0;
}
/* 设置整体布局高度 */
.container {
  height: 100vh;
  padding-top: 60px;    /* 头部高度 */
  padding-bottom: 60px; /* 底部高度 */
  padding-left: 200px;  /* 侧边栏宽度 */
  box-sizing: border-box;
}
.el-main {
  padding-bottom: 60px; /* 与footer高度一致 */
}
.el-aside {
  background-color: var(--aside-color);
  color: #333;
  text-align: center;
  line-height: 200px;
  position: fixed;
  top: 60px; /* 头部高度 */
  left: 0;
  bottom: 30px; /* 底部高度 */
  overflow-y: auto; /* 允许滚动 */
  z-index: 999;
}
</style>